<template>
	<view class="ad-container"
		v-if="showAd" 
	    @tap="handleAdClick"
	    :style="{
	      transform: `translate(${moveX}px, ${moveY}px)`,
	      left: '0',
	      top: '0'
	    }">
	    <image class="ad-image" :src="banner[0]?.file" mode="aspectFit"></image>
	    <view class="close-btn" @tap="closeAd"><view class="iconfont icon-guanbi2"></view></view>
	 </view>
</template>

<script>
	export default {
	  data() {
	    return {
	      showAd: true,
		  adImageUrl: "/static/image/learn_active.png",
		  moveX: 0,  // 水平位置
		  moveY: 0,  // 垂直位置
		  directionX: 1,
		  directionY: 1,
		  speed: 1,
		  timer: null,
		  screenWidth: 375,  // 默认值，mounted中会更新
		  screenHeight: 667  // 默认值，mounted中会更新
	    }
	  },
	  props: {
		  banner: {
			  type: Array,
			  default: () => ([])
		  }
	  },
	  mounted() {
	    this.startMoving();
	  },
	  beforeDestroy() {
	    this.stopMoving();
	  },
	  methods: {
	    startMoving() {
	      // 获取屏幕尺寸
	      const systemInfo = uni.getSystemInfoSync();
	      this.screenWidth = systemInfo.windowWidth;
	      this.screenHeight = systemInfo.windowHeight;
	      
	      // 随机初始位置
	      this.moveX = Math.random() * (this.screenWidth - 200);
	      this.moveY = Math.random() * (this.screenHeight - 200);
	      
	      // 开始动画
	      this.timer = setInterval(() => {
	        this.moveAd();
	      }, 30);
	    },
	    moveAd() {
	      // 更新位置
	      this.moveX += this.directionX * this.speed;
	      this.moveY += this.directionY * this.speed;
	      
	      // 边界检测 - 水平方向
	      if (this.moveX <= 0) {
	        this.moveX = 0;
	        this.directionX = 1;
	      } else if (this.moveX >= this.screenWidth - 50) {
	        this.moveX = this.screenWidth - 50;
	        this.directionX = -1;
	      }
	      
	      // 边界检测 - 垂直方向
	      if (this.moveY <= 0) {
	        this.moveY = 0;
	        this.directionY = 1;
	      } else if (this.moveY >= this.screenHeight - 50) {
	        this.moveY = this.screenHeight - 50;
	        this.directionY = -1;
	      }
	    },
	    stopMoving() {
	      if (this.timer) {
	        clearInterval(this.timer);
	        this.timer = null;
	      }
	    },
	    handleAdClick() {
			this.$emit('bannerClick')
 	    },
	    closeAd() {
			console.log(234234)
			this.showAd = false;
			this.stopMoving();
			this.handleAdClick();
	    }
	  }
	}
</script>

<style lang="scss" scoped>
	.ad-container {
	  position: fixed;
	  width: 150rpx;
	  height: 150rpx;
	  z-index: 9999;
	  transition: transform 0.3s linear;
	}
	
	.ad-image {
	  width: 100%;
	  height: 100%;
	  border-radius: 12rpx;
	  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
	}
	
	.close-btn {
	  position: absolute;
	  left: -30rpx;
	  top: -30rpx;
	  width: 40rpx;
	  height: 40rpx;
	  background-color: #D0D0D0;
	  color: #ffffff;
	  border-radius: 50%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 30rpx;
	  z-index: 10000;
	}
</style>